<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="handlerClick(index)"
        :class="{ active: flag == index }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
//这个方法专门用来接收路由的参数 名字是固定的
export default {
  setup(props) {
    const route = useRoute();
    //这就相当于是之前的this.$route
    console.log(route.query.id);
    const data = reactive({
      list: [
        {
          name: "小明",
          age: 18,
        },
        {
          name: "小鹏",
          age: 20,
        },
        {
          name: "小林",
          age: 22,
        },
      ],
      num: 10,
    });
    const flag = ref(0);
    // function handlerClick(index) {
    //   alert(index);
    // }
    // 在setup中 定义函数的方法不止一种

    const handlerClick = (index) => {
      // alert(index);
      flag.value = index;
    };
    //可以用这种方法定义函数

    console.log(data.list);

    return { ...toRefs(data), handlerClick, flag };
  },
};
</script>
<style lang="scss">
.active {
  background: red;
}
</style>
